<template>
	<view class="mine">
		<!-- 用户信息 -->
		<image src="../../../static/mine/bj.png" mode="widthFix"></image>
		<view class="userInfo flex-r-b-c">
			<image :src="userInfo.userimg" mode="widthFix"></image>
			<view class="userInfo_r">
				<view class="userInfo_r_t flex-r-b-c">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="number">{{userInfo.user_id}}</view>
				</view>
				<view class="userInfo_r_b flex-r-b-c">
					<view class="tel">{{userInfo.mobile != null ? userInfo.mobile : ''}}</view>
					<view class="integral">会员积分：{{userInfo.integral}}</view>
				</view>
			</view>
		</view>
		<view class="text_title">关注健康自然之美</view>

		<!-- 内容部分 -->
		<view class="mine_content">
			<!-- 我的 -->
			<view class="my_box">

				<view class="my_list flex-r-b-c" @tap="goMyProject">
					<view class="my_list_l flex-r-c-c">
						<image src="../../../static/mine/wdxm.png" mode="widthFix"></image>
						<view class="my_text">我的项目</view>
					</view>
					<view class="my_list_f flex-r-c-c">
						<text>{{userInfo.myproject}}个</text>
						<u-icon name="arrow-right" color="#ACACAC" size="25"></u-icon>
					</view>
				</view>

				<view class="my_list flex-r-b-c" @tap="goOrder">
					<view class="my_list_l flex-r-c-c">
						<image src="../../../static/mine/wdyy.png" mode="widthFix"></image>
						<view class="my_text">我的预约</view>
					</view>
					<view class="my_list_f flex-r-c-c">
						<text>{{userInfo.myappointment}}个</text>
						<u-icon name="arrow-right" color="#ACACAC" size="25"></u-icon>
					</view>
				</view>

			</view>
			<!-- 分销中心 -->
			<view class="distribution_box list_box" v-if="userInfo.agent == 1">
				<view class="list_t flex-r-b-c" @tap="goDistribution(1)">
					<view class="list_t_l flex-r-c-c">
						<image src="../../../static/mine/fxzx.png" mode="widthFix"></image>
						<view class="text">分销中心</view>
					</view>
					<u-icon name="arrow-right" color="#ACACAC" size="30"></u-icon>
				</view>

				<view class="list_b flex-r-b-c">
					<view class="list">
						<view class="text">{{agentDistribution.distribution.num_str}}</view>
						<view class="number"><text>{{agentDistribution.distribution.num}}</text>人</view>
					</view>
					<view class="list">
						<view class="text">{{agentDistribution.distribution.profit_str}}</view>
						<view class="number"><text>{{agentDistribution.distribution.profit}}</text>元</view>
					</view>
					<view class="list">
						<view class="text">{{agentDistribution.distribution.cumulative_str}}</view>
						<view class="number"><text>{{agentDistribution.distribution.cumulative}}</text>元</view>
					</view>
				</view>

			</view>
			<!-- 代理中心 -->
			<view class="agent_box list_box" v-if="userInfo.distribution == 1">
				<view class="list_t flex-r-b-c" @tap="goDistribution(2)">
					<view class="list_t_l flex-r-c-c">
						<image src="../../../static/mine/dlzx.png" mode="widthFix"></image>
						<view class="text">代理中心</view>
					</view>
					<u-icon name="arrow-right" color="#ACACAC" size="30"></u-icon>
				</view>

				<view class="list_b flex-r-b-c">
					<view class="list">
						<view class="text">{{agentDistribution.agent.num_str}}</view>
						<view class="number"><text>{{agentDistribution.agent.num}}</text>人</view>
					</view>
					<view class="list">
						<view class="text">{{agentDistribution.agent.profit_str}}</view>
						<view class="number"><text>{{agentDistribution.agent.profit}}</text>元</view>
					</view>
					<view class="list">
						<view class="text">{{agentDistribution.agent.cumulative_str}}</view>
						<view class="number"><text>{{agentDistribution.agent.cumulative}}</text>元</view>
					</view>
				</view>

			</view>
			<!-- 列表 -->
			<view class="icon_box flex-r-s-c">
				<view class="list border_r border_b" v-for="(item,index) in iconList" :key="index" :data-url="item.url"
					@tap="goLink">
					<image :src="item.icon" mode="widthFix"></image>
					<view class="text">{{item.name}}</view>
				</view>
			</view>

		</view>
		<!-- 签署协议 -->
		<u-popup v-model="xieyi_daili" mode="bottom" border-radius="28" :safe-area-inset-bottom="true">
			<view style="padding: 48rpx 52rpx;" class="flex-c-c-s">
				<view class="flex-r-s-c" style="width: 100%;">
					<image src="../../../static/logo.png" mode="widthFix" style="width: 64rpx;"></image>
					<text
						style="margin-left: 40rpx;font-size: 28rpx;color: #000000;font-weight: 600;">氧发堂官方旗舰店代理升级&nbsp;&nbsp;提醒</text>
				</view>
				<text style="margin-top: 40rpx;font-size: 28rpx;color: #000000;font-weight: 600;">恭喜您已达到升级条件</text>
				<text
					style="margin-top: 30rpx;font-size: 24rpx;color: #999999;">允许我们在必要的场景下，合理使用你的个人信息，并且充分保障你的合法权利，进行电子协议签署。</text>
				<input type="text"
					style="margin-top: 46rpx;height: 80rpx;background-color: #F4F4F4;border-radius: 8rpx;font-size: 24rpx;padding-left: 40rpx;width: calc(100% - 40rpx);"
					placeholder-style="color:#999999;font-size:24rpx;" placeholder="请输入您的姓名" v-model="usernames_dl" />
				<input type="text"
					style="margin-top: 26rpx;height: 80rpx;background-color: #F4F4F4;border-radius: 8rpx;font-size: 24rpx;padding-left: 40rpx;width: calc(100% - 40rpx);"
					placeholder-style="color:#999999;font-size:24rpx;" placeholder="请输入您的身份证号" v-model="userCode_dl" />
				<view class="flex-c-c-c" @click="dl_fn_btn"
					style="width: 100%;height: 80rpx;background-color:#06C160;border-radius:8rpx;margin-top: 46rpx;">
					<text style="color: #FFFFFF;font-size: 28rpx;">下一步</text>
				</view>
			</view>
		</u-popup>
		<!-- 底部tabbar，组件内存在占位view最好放html最底部 -->
		<tabber :active='3'></tabber>
	</view>
</template>

<script>
	import tabber from '../../../components/tabbar.vue'
	export default {
		components: {
			tabber
		},
		data() {
			return {
				userInfo: {}, // 用户信息
				agentDistribution: {}, // 分销代理
				iconList: [], // 底部 icon 栏
				xieyi_daili: false,
				usernames_dl: '', //代理人名字
				userCode_dl: '', //代理人身份证
			}
		},
		onLoad() {
			this.getAgentDistribution() // 分销代理
			this.getIconList() // 获取 icon 栏
		},
		onShow(options) {
			// 引用tabbar的页面隐藏自带tabbar,不改变四个tabbar的权重
			uni.hideTabBar()
			this.getUserInfo() // 获取用户信息
		},
		methods: {
			dl_fn_btn() { //代理人提交
				if (this.userCode_dl != '' && this.usernames_dl != '' && this.userCode_dl.length === 18) {
					this.$api.agent_saveEsgin({
						name: this.usernames_dl,
						idcard: this.userCode_dl
					}).then(res => {
						this.yqb_fn()
					})
				} else {
					uni.showToast({
						title: '请补全信息或检查身份证号是否正确',
						icon: 'none'
					})
				}
			},
			yqb_fn() {
				let that = this
				if (uni.getStorageSync('iszz')) {
					uni.removeStorageSync('iszz')
				} else {
					uni.showModal({
						title: '代理人升级',
						content: '您已达到升级条件，是否跳转上链公证签小程序签名认证。',
						confirmText: '前往',
						success(res1) {
							if (res1.confirm) {
								that.$api.agent_sesginStatus()
									.then(res2 => {
										uni.setStorageSync('flowId', res2.data.data.flowId)
										//#ifdef MP-WEIXIN
										wx.navigateToMiniProgram({
											appId: 'wx1cf2708c2de46337', // 上链公证签小程序APPID
											path: '/pages/index/index', // 上链公证签页面地址
											extraData: {
												requestObj: { // 必填，入参
													flowId: res2.data.data.flowId, // 必填，签署流程id
													accountId: res2.data.data.accountId, // 签署必填，账号id
													type: 'SIGN', // 非必填，业务类型：签署 SIGN（默认）
													env: 'sml' // 非必填，对接环境：线上 prod(默认）, 模拟 sml(用于对接调试阶段）
												},
												callbackObj: { // 非必填，回传数据：签署完成后会将此数据完整回传
													'from': 'esign',
													'flowId': res2.data.data.flowId
												}
											},
											success(res) {
												// 根据自身需要
												console.log(res)
											},
											fail(res) {
												// 根据自身需要
												console.log(res)

											},
											complete(res) {
												// 根据自身需要
												console.log(res)
											},
										})
										//#endif
									})
							} else if (res1.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			// 获取用户信息
			getUserInfo() {
				let that = this
				that.$api.user_info().then(res => {
					console.log(res)
					that.userInfo = res.data.data
					switch (res.data.data.type) {
						case 0:
							break;
						case 1:
							this.yqb_fn()
							break;
						case 2:
							this.xieyi_daili = true
							break;
					}
				})
			},
			// 分销代理
			getAgentDistribution() {
				let that = this
				that.$api.agent_distribution().then(res => {
					console.log(res)
					that.agentDistribution = res.data.data
				})
			},
			// 获取 icon 栏
			getIconList() {
				let that = this
				that.$api.icon_list().then(res => {
					console.log(res)
					that.iconList = res.data.data
				})
			},
			// icon 栏的跳转链接
			goLink(e) {
				console.log(e)
				let url = e.currentTarget.dataset.url
				if (url == '/mine/order/order') {
					url = '/mine/order/order?type=2'
				} else if (url == '/order/comment/comment') {
					url = '/order/comment/comment?data=' + JSON.stringify({
						type: 1
					})
				}
				uni.navigateTo({
					url: url
				})
			},

			// 跳转到分销中心
			goDistribution(type) {
				uni.navigateTo({
					url: '/distribution/distribution/distribution?type=' + type
				})
			},

			// 跳转到我的项目
			goMyProject() {
				uni.navigateTo({
					url: '/mine/myProject/myProject'
				})
			},

			// 跳转到预约订单
			goOrder() {
				uni.navigateTo({
					url: '/mine/order/order?type=1'
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.mine {
		position: relative;

		image {
			width: 100vw;
		}

		.userInfo {
			width: 90vw;
			position: absolute;
			left: 50%;
			top: 20px;
			transform: translateX(-50%);

			image {
				width: 122rpx;
				height: 122rpx;
				border-radius: 50%;
			}

			.userInfo_r {
				width: 80%;
				color: #fff;

				.userInfo_r_t {
					.name {
						font-size: 28rpx;
						font-weight: bold;
					}

					.number {
						font-size: 24rpx;
					}
				}

				.userInfo_r_b {
					margin-top: 20rpx;

					.tel {
						font-size: 24rpx;
						font-weight: 300;
					}

					.integral {
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}
		}

		.text_title {
			width: 90vw;
			text-align: center;
			color: #fff;
			font-size: 20rpx;
			letter-spacing: 26rpx;
			font-weight: bold;
			position: absolute;
			left: 50%;
			top: 170rpx;
			transform: translateX(-50%);
		}

		.mine_content {
			width: 90vw;
			margin: 0 auto;
			margin-top: -100rpx;
			padding-bottom: 100rpx;

			.my_box {
				box-sizing: border-box;
				position: relative;
				z-index: 999;
				width: 100%;
				height: 160rpx;
				border-radius: 20rpx;
				box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.08);
				background-color: #fff;
				padding: 0rpx 30rpx;

				.my_list {
					height: 80rpx;
					border-top: 1px solid #F2F2F2;

					&:nth-child(1) {
						border-top: none;
					}

					.my_list_l {
						image {
							width: 36rpx;
							height: 36rpx;
						}

						.my_text {
							margin-left: 18rpx;
							font-weight: 24rpx;
							font-weight: 500;
							color: #575757;
						}
					}

					// 
					.my_list_f {
						text {
							margin-right: 10rpx;
							color: #FF6C1D;
							font-size: 28rpx;
							font-weight: 500;
						}
					}
				}

				// 
			}

			.list_box {
				width: 100%;
				height: 240rpx;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				margin-top: 30rpx;
				box-sizing: border-box;
				padding: 30rpx;

				.list_t {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					.text {
						color: #575757;
						font-size: 24rpx;
						font-weight: 500;
						margin-left: 20rpx;
					}
				}

				.list_b {
					margin-top: 20rpx;

					.list {
						width: 194rpx;
						height: 132rpx;
						border-radius: 10rpx;
						background-color: #F5F5F5;
						box-sizing: border-box;
						padding: 20rpx;

						.text {
							color: #606060;
							font-size: 24rpx;
							font-weight: bold;
						}

						.number {
							margin-top: 10rpx;
							color: #9E9E9E;
							font-weight: 500;
							font-size: 20rpx;

							text {
								color: #45806E;
								font-weight: 500;
								font-size: 40rpx;
								margin-right: 4rpx;
								display: inline-block;
							}
						}
					}
				}
			}

			.icon_box {
				width: 100%;
				height: 344rpx;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 20rpx;
				margin-top: 20rpx;
				flex-wrap: wrap;

				.border_r {
					border-right: 1px solid #F2F2F2;
				}

				.border_b {
					border-bottom: 1px solid #F2F2F2;
				}

				.list {
					width: 25%;
					height: 150rpx;
					text-align: center;

					&:nth-child(4) {
						border-right: none
					}

					image {
						margin-top: 25rpx;
						width: 62rpx;
						height: 52rpx;
					}

					.text {
						color: #575757;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}
				}
			}

			//
		}

		// 
	}
</style>
